<template>
  <div class="flex sticky top-0 bg-#fff p-3 z-10 items-center">
    <input
      v-model="search.keyword"
      class="flex-auto h-40px rounded-full p-3 bg-#eee"
      placeholder="搜索"
    />
    <div class="ml-3" @click="toSearch">搜索</div>
  </div>

  <template v-for="item in list" :key="item.deviceId">
    <div class="m-3 bg-white rounded-xl p-3" @click="toNavigate(item.projectId)">
      <div class="w-full h-[180px] bg-#f5f5f5 flex-center rounded-lg">
        <img v-if="item.lastSnapshotUrl" :src="item.lastSnapshotUrl" class="w-full h-full" />
        <img v-else src="@/assets/images/empty.png" class="h-1/2" />
      </div>

      <div class="flex mt-4">
        <div class="flex-auto">{{ item.address }}</div>

        <div class="flex-none">
          <div
            v-if="item.installStatus === 'UNINSTALL'"
            class="text-sm rounded-md px-3 py-1 bg-#eee"
            :class="item.online ? 'bg-green text-#fff' : ''"
          >
            {{ item.installStatusDesc }}
          </div>

          <div
            v-else
            class="text-sm rounded-md px-3 py-1 text-#fff"
            :class="item.online ? 'bg-green' : 'bg-orange'"
          >
            {{ item.online ? '在线' : '离线' }}
          </div>
        </div>
      </div>

      <div class="mt-3 text-sm">
        <div class="mt-1">项目经理：{{ item.receiveUserName }}</div>
        <!-- <div class="mt-1">监理：</div>
          <div class="mt-1">工地位置：{{ item.address }}</div>
          <div class="mt-1">开工日期：</div>
          <div class="mt-1">完工计划：</div> -->
      </div>
    </div>
  </template>

  <div v-if="loading" class="p-3 text-center text-sm">正在加载</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from '@nutui/nutui'

import useList from '@/hooks/useList'
import useScrollToBottom from '@/hooks/useScrollToBottom'

const { query } = useRoute()
const router = useRouter()

const isAdmin = query.auth == '1'
const projectId = query.projectId || ''

const search = reactive({
  keyword: '',
  projectId: projectId,
  orgId: '1457918704730435585',
})

const { loading, list, isAll, nextPage, resetToFirst } = useList('/api/v1/MK/getDeviceList', {
  manual: !isAdmin && !projectId,
  defaultParams: search,
})

const toSearch = () => resetToFirst(search)
const toNavigate = (id) => {
  if (id) router.push(`/monitor/${id}`)
  else showToast.fail('无工地可查看')
}

useScrollToBottom(() => {
  if (loading.value || isAll.value) return

  console.log('next')

  nextPage(search)
})
</script>
